<script setup lang="ts">
import { onMounted, ref } from 'vue';
const loading = ref<boolean>(false);
type Props = {
  duration: any;
};
const props = withDefaults(defineProps<Props>(), {
  duration: () => {},
});
/**
 * 打开加载框
 */
const open = () => {
  loading.value = true;
};

onMounted(() => {
  loading.value = true;
});

const close = () => {
  loading.value = false;
  props.duration();
};
defineExpose({
  open,
  close,
});
</script>

<template>
  <div v-if="loading" class="loading-body">
    <section>
      <div class="loader-content">
        <div class="loading-content-box"></div>
      </div>
      <div class="loader-title">加载中......</div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.loading-body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10000000;
  section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    .loader-content {
      position: absolute;
      width: 200px;
      height: 140px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      .loading-content-box {
        width: 40px;
        height: 40px;
        color: #3f51b5;
        font-size: 40px;
        overflow: hidden;
        border-radius: 50%;
        transform: translateZ(0);
        animation:
          loadBox 1.7s infinite ease,
          roundBox 1.7s infinite ease;
      }
    }
    .loader-title {
      position: absolute;
      width: 90px;
      height: 40px;
      line-height: 40px;
      font-size: 0.9rem;
      color: #3f51b5;
      top: calc(50% + 30px);
      text-align: center;
    }
  }
}
@keyframes loadBox {
  0% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      0 -0.83em 0 -0.42em,
      0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em,
      0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      0 -0.83em 0 -0.42em,
      0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em,
      0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      -0.087em -0.825em 0 -0.42em,
      -0.173em -0.812em 0 -0.44em,
      -0.256em -0.789em 0 -0.46em,
      -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      -0.338em -0.758em 0 -0.42em,
      -0.555em -0.617em 0 -0.44em,
      -0.671em -0.488em 0 -0.46em,
      -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      -0.377em -0.74em 0 -0.42em,
      -0.645em -0.522em 0 -0.44em,
      -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      0 -0.83em 0 -0.42em,
      0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em,
      0 -0.83em 0 -0.477em;
  }
}
@keyframes roundBox {
  0% {
    transform: rotate(0deg); /* 开始旋转 div 元素 */
  }

  100% {
    transform: rotate(360deg); /* 结束旋转 div 元素 */
  }
}
</style>
